
<template>
  <!-- 推荐专区 -->
  <view class="panel hot">
    <navigator :url="`/pages/hot/hot?type=${item.type}`" class="item" v-for="item in hotList" :key="item.id" hover-class="none">
			<!-- 标题 -->
      <view class="title">
        <text class="title-text">{{ item.title }}</text>
        <text class="title-desc">{{ item.alt }}</text>
      </view>
			<!-- 图片 -->
      <view class="imgs">
        <image
          v-for="src in item.pictures"
          :key="src"
          class="image"
          mode="aspectFit"
          :src="src"
        ></image>
      </view>
    </navigator>
  </view>
</template>

<script setup lang="ts">
import type { HotItem } from '@/types/home.d'

// 定义 props 接收数据
defineProps<{
  hotList: HotItem[] | any
}>()
</script>

<style lang="scss" scoped>
/* 热门推荐 */
.hot {
  display: flex;
  flex-wrap: wrap;
  min-height: 508rpx;
  margin: 20rpx 20rpx 0;
  border-radius: 10rpx;
  background-color: #fff;

  .title {
    display: flex;
    align-items: center;
    padding: 24rpx 24rpx 0;
    font-size: 32rpx;
    color: #262626;
    position: relative;
    .title-desc {
      font-size: 24rpx;
      color: #7f7f7f;
      margin-left: 18rpx;
    }
  }

  .item {
    display: flex;
    flex-direction: column;
    width: 50%;
    height: 254rpx;
    border-right: 1rpx solid #eee;
    border-top: 1rpx solid #eee;
    .title {
      justify-content: start;
    }
    &:nth-child(2n) {
      border-right: 0 none;
    }
    &:nth-child(-n + 2) {
      border-top: 0 none;
    }
		.imgs {
		  flex: 1; //flex: 1; 是 flex-grow 的简写，表示该元素会占据父容器的剩余空间。
		  padding: 15rpx 20rpx;
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		}
		.image {
		  width: 150rpx;
		  height: 150rpx;
		}
  }
}
</style>